{extend name="base" /}
{block name="style"}
<link rel="stylesheet" href="/assets/swiper/swiper.min.css">
<style>
    .titleImg {
        margin:0px auto 40px auto;
    }
    .main{ padding-top: 40px; }
    .swiper-container {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

    .gallery-thumbs-wrap {
        width: 100%;
        position: relative;
    }

    .gallery-thumbs {
        box-sizing: border-box;
        padding: 30px 0;
        width: 95%;
    }
    .swiper-button-prev.swiper-button {
        background-image: url(/assets/img/arrow-left.png);
        float: left;
        width: 2%;
        left:-1%;
    }
    .swiper-button-next.swiper-button {
        background-image: url(/assets/img/arrow-right.png);
        float: right;
        width: 2%;
        right:-1%;
    }
    .gallery-thumbs .swiper-slide {
        height: 100%;
    }
    .gallery-thumbs .swiper-slide-active {
        opacity: 1;
        border: 4px solid #5155FF
    }
    .main-title {
        margin: 10px 0;
        font-weight: bold;
        color: #222;
    }
    .main-title>div {
        padding: 0;
    }
    .swiper-button-prev.swiper-button-white {
        background-image: url(/assets/img/left.png)
    }
    .swiper-button-next.swiper-button-white {
        background-image: url(/assets/img/right.png)
    }
    .swiper-button-white {
        background-size: 50px 50px;
        width: 80px;
        height: 50px;
        margin-top: -25px;
    }
    .swiper-button {
        background-size: 26px auto;
    }

    @media (max-width: 767px) {
        .main {
            padding : 30px 0;
        }
        .titleImg{ margin-bottom: 30px; }
        .main-title {
            font-size: 13px;
        }
        .main-desc {
            font-size: 12px;
            line-height: 20px;
        }
        .swiper-button-next,
        .swiper-button-prev {
            background-size: 34px 34px;
            width: 60px;
            height: 34px;
            margin-top: -17px;
        }
        .gallery-thumbs-wrap {
            display: none;
        }
    }

    @media (min-width: 768px) {
        .main {
            padding-bottom: 50px;
        }
        .main-title {
            font-size: 12px;
        }
        .main-desc {
            font-size: 12px;
            line-height: 20px;
        }
    }

    @media (min-width: 992px) {
        .main-title {
            font-size: 15px;
        }
        .main-desc {
            font-size: 14px;
        }
    }

    @media (min-width: 1200px) {
        .main {
            padding-bottom: 150px;
        }
        .main-title {
            font-size: 17px;
            margin: 10px 0;
            font-weight: bold;
            color: #222;
        }
        .main-desc {
            line-height: 40px;
            font-size: 16px;
        }
    }
</style>
{/block}
{block name="content"}
<section id="banner">
    <div class="detail detail-page hidden-xs"></div>
    <div id="carousel-box" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="/assets/img/banner.png">
            </div>
            <div class="item">
                <img src="/assets/img/banner.png">
            </div>
            <div class="item">
                <img src="/assets/img/banner.png">
            </div>
        </div>
        <!-- Controls -->
        <a class="left control" href="#carousel-box" role="button" data-slide="prev">
            <img src="/assets/img/left.png" alt="" />
        </a>
        <a class="right control" href="#carousel-box" role="button" data-slide="next">
            <img src="/assets/img/right.png" alt="" />
        </a>
    </div>
    <div class="detail detail-path hidden-xs">
        <div class="container">
            <div class="detail-home">
                <a href="javascript:void(0)">
                    <img src="/assets/img/home.png" />
                </a>
                <a href="commercial.html" id="main-title">业务布局</a>&gt;
                <a href="commercial.html" id="sub-title">商业地产</a>
            </div>
            <ul class="list-inline detail-title" id="detail-title">
                <li class="active">
                    <a href="commercial.html">商业地产</a>
                </li>
                <li>
                    <a href="javascript:void(0)">项目代建</a>
                </li>
                <li>
                    <a href="javascript:void(0)">资产经营</a>
                </li>
                <li>
                    <a href="javascript:void(0)">物业管理</a>
                </li>
                <li>
                    <a href="javascript:void(0)">酒店管理</a>
                </li>
            </ul>
        </div>
    </div>
</section>
<section class="main">
    <div class="container wrap">
        <div class="row">
            <div class="col-xs-12">
                <img class="titleImg img-responsive" src="{$project.img}" />
                <div class="swiper-container gallery-top">
                    <div class="swiper-wrapper">
                        {volist name="project.imgs" id="vo"}
                        <div class="swiper-slide" style="background-image:url({$vo.img})"></div>
                        {/volist}
                    </div>
                    <div id="playImgBth" class="swiper-button-next swiper-button-white"></div>
                    <div class="swiper-button-prev swiper-button-white"></div>
                </div>

                <div class="gallery-thumbs-wrap">
                    <div class="swiper-container gallery-thumbs">
                        <div class="swiper-wrapper">
                            {volist name="project.imgs" id="vo"}
                            <div class="swiper-slide" style="background-image:url({$vo.img})"></div>
                            {/volist}
                        </div>
                    </div>
                    <div class="swiper-button-next swiper-button"></div>
                    <div class="swiper-button-prev swiper-button"></div>
                </div>

                <div class="row main-title">
                    <div class="col-sm-2">{$project.name}</div>
                    <div class="col-sm-2">参考均价：{$project.price}</div>
                    <div class="col-sm-2">交房时间：{$project.project_status}</div>
                    <div class="col-sm-2">物业类型：{$project.wuye}</div>
                    <div class="col-sm-2">项目地址：{$project.address}</div>
                    <div class="col-sm-2">项目特色：{$project.type}</div>
                </div>
                <div class="row main-desc">
                    <div class="col-sm-12">
                        {$project.description}
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{/block}
{block name="script"}
<!-- Swiper JS -->
<script src="/assets/swiper/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    setHeight();

    var timer = setInterval(function () {
        document.getElementById('playImgBth').click()
    }, 4000)

    window.onresize = setHeight;
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop: true,
        loopedSlides: 6,
        navigation: {
            nextEl: '.swiper-button-next.swiper-button-white',
            prevEl: '.swiper-button-prev.swiper-button-white'
        }
    });
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 6,
        touchRatio: 0.2,
        loop: true,
        loopedSlides: 6,
        slideToClickedSlide: true,
        navigation: {
            nextEl: '.swiper-button-next.swiper-button',
            prevEl: '.swiper-button-prev.swiper-button'
        }
    });
    galleryTop.controller.control = galleryThumbs;
    galleryThumbs.controller.control = galleryTop;

    function setHeight() {
        var width = document.getElementsByClassName('wrap')[0].offsetWidth;
        document.getElementsByClassName('gallery-top')[0].style.height = width * (439 / 1133) + 'px';
        document.getElementsByClassName('gallery-thumbs')[0]
            .getElementsByClassName('swiper-wrapper')[0]
            .style.height = width / 6 * (189 / 376) + 'px';
    }
</script>
{/block}